<!--
 * @Author: dfh
 * @Date: 2024-03-21 08:28:36
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container" @touchmove.stop="" v-if="visiable">
        <view class="dialog-wrap">
            <view class="header-wrap">
                <text class="txt-black-34 txt-38 txt-w-6">请选择币种</text>
                <text class="iconfont icon-close" @click="hide"></text>
            </view>
            <scroll-view scroll-y class="scroll" :scroll-into-view="scrollToView">
                <view class="content-wrap">
                    <view class="search-wrap">
                        <text class="iconfont icon-fenxiang txt-black-153"></text>
                        <input class="input ml-14 flex-1 txt-28 txt-black-34" placeholder="货币名称或国家/地区"
                            placeholder-class="p-c" />
                    </view>
                    <view class="flex flex-col mt-20">
                        <view class="txt-black-153 txt-26 my-20">热门币种</view>
                        <view class="hot-wrap">
                            <view class="hot-item" v-for="(item, index) in hotList" :key="index" @click="onOkHandle(item)">
                                <image :src="item.currencyIcon" style="width:60rpx;height:45rpx"/>
                                <!-- <text class="iconfont icon-country-zh-cn txt-guoqi"></text> -->
                                <text class="txt-black-34 txt-28 ml-20">{{ item.currencyZn }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="flex flex-col mt-30">
                        <view class="txt-black-153 txt-26">全部币种（按照拼音顺序排列）</view>
                        <view class="flex flex-col" v-for="(value, key) in data" :key="key">
                            <view class="txt-black-153 txt-28 mt-22" :id="key">{{ key }}</view>
                            <view class="flex ai-center my-14" v-for="(item, index) in value" :key="index" @click="onOkHandle(item)">
                                <!-- <text class="iconfont icon-meiguoguoqi  txt-guoqi"></text> -->
                                <image :src="item.currencyIcon" style="width:60rpx;height: 45rpx;"/>
                                <view class="ml-20 flex flex-col">
                                    <text class="txt-black-34 txt-26 txt-w-5">{{ item.currencyZn }}</text>
                                    <text class="txt-black-102 txt-18 mt-4">{{ item.currencyEn }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="zimu-wrap">
                <text class="txt-20 txt-white-255" v-for="item in zimuList" :key="item"
                    @click="scrollToViewHandle(item)">{{ item }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import {  fetchCurrencyHotList } from '@/services/home'
import {showToast} from '@/utils/toast'

const emits = defineEmits(['onConfirm'])
defineProps({
    data:{
        type:Object,
        default:()=>{}
    }
})

const hotList = ref([]);
const visiable = ref(false);
const zimuList = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z',
]
const scrollToView = ref('');
const flag = ref('');

onMounted(() => {
    getCurrencyHotList();
})

const scrollToViewHandle = (id) => {
    scrollToView.value = id;
}

const getCurrencyHotList = async () => {
    const { msg, status, data } = await fetchCurrencyHotList();
    if (status === 1) {
        hotList.value = (data || []).filter(item=>item.currencyZn.length<=3)
    } else {
        showToast(msg || '获取热门利率分组')
    }
}



const show = (type) => {
    visiable.value = true;
    flag.value = type;
}

const hide = () => {
    visiable.value = false;
}

const onOkHandle = (data) => {
    emits('onConfirm', { type: flag.value, data })
    hide();
}

defineExpose({
    show,
    hide
})

</script>
<style>
.icon-fenxiang {
    color: rgba(153, 153, 153, 1);
}

.p-c {
    font-size: 28rpx;
    color: rgba(153, 153, 153, 1);
}

.txt-guoqi {
    font-size: 50rpx;
}

.icon-close {
    font-size: 40rpx;
}

/* 隐藏滚动条的样式 */
</style>
<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 999!important;



    .dialog-wrap {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 80%;
        background-color: white;
        border-radius: 30rpx 30rpx 0 0;
        padding: 30rpx 0rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;

        .header-wrap {
            width: 682rpx;
            height: 100rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .scroll {
            width: 682rpx;
            height: calc(100% - 100rpx);

            &::-webkit-scrollbar {
                width: 0 !important;
                height: 0 !important;
                display: none;
            }

            .content-wrap {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
            }

            .search-wrap {
                margin-top: 30rpx;
                width: 682rpx;
                height: 80rpx;
                border-bottom: 2rpx solid rgba(242, 242, 251, 1);
                display: flex;
                align-items: center;
            }

            .hot-wrap {
                width: 682rpx; //642 / 3 = 214
                display: flex;
                flex-wrap: wrap;

                .hot-item {
                    margin-top: 10rpx;
                    width: 214rpx;
                    height: 80rpx;
                    background-color: #f6f3f3;
                    margin-left: 20rpx;
                    display: flex;
                    align-items: center;
                    padding: 0 20rpx;
                    box-sizing: border-box;
                    border-radius: 10rpx;
                }

                .hot-item:nth-child(3n+1) {
                    margin-left: 0;
                }
            }

        }

        .zimu-wrap {
            position: absolute;
            right: 30rpx;
            top: 184rpx;
            width: 30rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(153, 153, 153, 1);
            border-radius: 15rpx;
            background-color: rgba(0, 0, 0, .2);
            padding: 20rpx 0rpx;
        }
    }
}
</style>